<!--通用页脚-->
<script setup>

</script>
<template>
  <head>
    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp;display=swap'>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css'>
  </head>
  <!-- partial:index.partial.html -->
  <div class="main"></div>
  <div class="footer">
    <div class="bubbles">
      <div class="bubble"
           style="--size:5.598017005742297rem; --distance:6.096403162644155rem; --position:62.720817818741466%; --time:2.6810743330154407s; --delay:-3.979988150093053s;"></div>
      <div class="bubble"
           style="--size:3.2305769410204777rem; --distance:9.286918345700617rem; --position:3.2701279780724573%; --time:2.4247462667903292s; --delay:-3.3735076288510206s;"></div>
      <div class="bubble"
           style="--size:5.580784076321404rem; --distance:6.694780540797308rem; --position:40.84483747926213%; --time:3.6372374513523744s; --delay:-2.207844169561277s;"></div>
      <div class="bubble"
           style="--size:3.7127235654587203rem; --distance:7.063287830061766rem; --position:51.68997532720179%; --time:3.2406054141573972s; --delay:-3.269248425335803s;"></div>
      <div class="bubble"
           style="--size:3.327897266068514rem; --distance:8.536986509043127rem; --position:2.0441960285758825%; --time:3.094164906262222s; --delay:-2.774902343076581s;"></div>
      <div class="bubble"
           style="--size:3.4630874143997916rem; --distance:8.118011819208526rem; --position:53.32732918304668%; --time:3.0496133625652955s; --delay:-2.0180022750646653s;"></div>
      <div class="bubble"
           style="--size:4.13967993276751rem; --distance:6.02178695025084rem; --position:-0.0853244969463951%; --time:3.436258731190497s; --delay:-3.7337230158072536s;"></div>
      <div class="bubble"
           style="--size:3.2377300952447525rem; --distance:7.155239513517763rem; --position:26.69340419673866%; --time:3.054316646299215s; --delay:-2.1007298862871786s;"></div>
      <div class="bubble"
           style="--size:4.538481787555378rem; --distance:9.378020030707557rem; --position:80.41140210616085%; --time:2.0164506704785037s; --delay:-2.990693265641004s;"></div>
      <div class="bubble"
           style="--size:2.554643809180149rem; --distance:9.095907977921915rem; --position:98.57615455736517%; --time:3.5499765735955195s; --delay:-3.693285927019695s;"></div>
      <div class="bubble"
           style="--size:3.2885815140336936rem; --distance:7.473816790783974rem; --position:85.6298620359611%; --time:2.6020657435607286s; --delay:-2.248724579976977s;"></div>
      <div class="bubble"
           style="--size:4.490089799479406rem; --distance:8.403581189687053rem; --position:20.06420685678219%; --time:2.2966491044217396s; --delay:-3.0353709712338115s;"></div>
      <div class="bubble"
           style="--size:3.601446522413231rem; --distance:7.515525583230523rem; --position:65.61454891795721%; --time:3.384065975907828s; --delay:-2.294472024596066s;"></div>
      <div class="bubble"
           style="--size:5.736981622312164rem; --distance:9.389729534121436rem; --position:-4.213674875599116%; --time:2.0084378348592424s; --delay:-3.0441008856473486s;"></div>
      <div class="bubble"
           style="--size:5.777257183680892rem; --distance:8.780654322221675rem; --position:13.196972081293474%; --time:3.4392011497134654s; --delay:-2.5422298526730476s;"></div>
      <div class="bubble"
           style="--size:4.758900787229259rem; --distance:9.656305849483427rem; --position:86.9416584515864%; --time:2.790228451485438s; --delay:-3.8685575425175127s;"></div>
      <div class="bubble"
           style="--size:3.484790245160883rem; --distance:6.776529980466408rem; --position:61.07325913109091%; --time:2.6021580448296224s; --delay:-3.6525409289774964s;"></div>
      <div class="bubble"
           style="--size:4.917295523229852rem; --distance:8.431029294903086rem; --position:56.0129587985694%; --time:3.421608600404808s; --delay:-3.5959916005386368s;"></div>
      <div class="bubble"
           style="--size:4.162425018578734rem; --distance:6.658291541134812rem; --position:78.1664218922954%; --time:2.244494666256572s; --delay:-2.6979688476493386s;"></div>
      <div class="bubble"
           style="--size:3.989825355398282rem; --distance:6.497951138417024rem; --position:78.78618595755889%; --time:3.8755193177541654s; --delay:-3.219511910311255s;"></div>
      <div class="bubble"
           style="--size:3.569396034765111rem; --distance:8.250513748033816rem; --position:49.84046102634903%; --time:2.959165712284163s; --delay:-2.0069000772458963s;"></div>
      <div class="bubble"
           style="--size:3.458396031416057rem; --distance:8.997715418103134rem; --position:38.651709324364916%; --time:3.129603455638991s; --delay:-2.6694349354958784s;"></div>
      <div class="bubble"
           style="--size:2.173792269501768rem; --distance:7.330892107464808rem; --position:16.793375806562082%; --time:3.11510274669426s; --delay:-3.421151647270182s;"></div>
      <div class="bubble"
           style="--size:4.1463817098242295rem; --distance:7.797989039945707rem; --position:104.64830902970594%; --time:2.9138960771050115s; --delay:-2.875939126862988s;"></div>
      <div class="bubble"
           style="--size:2.870531177748604rem; --distance:6.099262837222249rem; --position:8.987425264014352%; --time:3.3426629426370034s; --delay:-3.7703801186671684s;"></div>
      <div class="bubble"
           style="--size:5.628673377415739rem; --distance:8.691603494609856rem; --position:33.455642755163765%; --time:3.9309744854336084s; --delay:-2.4851306828698516s;"></div>
      <div class="bubble"
           style="--size:4.338144951664646rem; --distance:9.500188014933228rem; --position:6.812412456576952%; --time:3.9062588359183494s; --delay:-2.0554845113356146s;"></div>
      <div class="bubble"
           style="--size:5.71787982977959rem; --distance:7.479272701367841rem; --position:97.99590706011183%; --time:2.0168444395271194s; --delay:-3.4366117366241955s;"></div>
      <div class="bubble"
           style="--size:2.3912652373489394rem; --distance:6.7011644881508685rem; --position:3.889240545049166%; --time:2.9589396145364892s; --delay:-2.7295043947482003s;"></div>
      <div class="bubble"
           style="--size:3.6765819758409606rem; --distance:6.132595309555668rem; --position:-2.625265820479017%; --time:3.072291974656653s; --delay:-2.4577416687427402s;"></div>
      <div class="bubble"
           style="--size:3.9256280826720644rem; --distance:6.641359524147074rem; --position:79.13590940646314%; --time:2.5612658682124443s; --delay:-3.1652429264496256s;"></div>
      <div class="bubble"
           style="--size:3.1708538981478416rem; --distance:9.25232651817791rem; --position:36.0454207397836%; --time:3.320923126027169s; --delay:-3.790763873278202s;"></div>
      <div class="bubble"
           style="--size:3.7897754882599832rem; --distance:9.863317670276881rem; --position:2.098715800614322%; --time:3.582360309837587s; --delay:-2.713896156692943s;"></div>
      <div class="bubble"
           style="--size:4.007306608588055rem; --distance:9.470239171869665rem; --position:0.8128626411931954%; --time:3.81282049006309s; --delay:-2.4663901014698064s;"></div>
      <div class="bubble"
           style="--size:2.321046723433186rem; --distance:8.206451240990784rem; --position:29.36235690883958%; --time:2.5604180148427327s; --delay:-2.997185341899019s;"></div>
      <div class="bubble"
           style="--size:2.5548716105630476rem; --distance:8.742024874996648rem; --position:81.18589036503361%; --time:3.1126365452228906s; --delay:-2.2056184677956696s;"></div>
      <div class="bubble"
           style="--size:4.725279439836271rem; --distance:9.233435382684945rem; --position:78.26691023332351%; --time:2.252818151741568s; --delay:-3.409810146201969s;"></div>
      <div class="bubble"
           style="--size:3.6501526789844316rem; --distance:7.630537371517869rem; --position:48.18290858605213%; --time:2.6279307045035805s; --delay:-3.9398271626894834s;"></div>
      <div class="bubble"
           style="--size:3.465222339918423rem; --distance:7.504645239141469rem; --position:54.54413040585194%; --time:3.456470564657153s; --delay:-2.6103321303441387s;"></div>
      <div class="bubble"
           style="--size:5.8987489006803004rem; --distance:8.805514343254377rem; --position:77.5453256761949%; --time:2.7732103033276125s; --delay:-3.8687153587299967s;"></div>
      <div class="bubble"
           style="--size:3.1984995631423736rem; --distance:6.1033561920855135rem; --position:6.07463312934102%; --time:3.112506286466319s; --delay:-3.703614307279294s;"></div>
      <div class="bubble"
           style="--size:3.425901918142803rem; --distance:9.971819161233576rem; --position:45.263010267804816%; --time:2.277516284311381s; --delay:-3.7503104583310773s;"></div>
      <div class="bubble"
           style="--size:4.940433678317883rem; --distance:9.092059898876808rem; --position:80.11289744305243%; --time:3.851899131186632s; --delay:-2.440388935854787s;"></div>
      <div class="bubble"
           style="--size:4.451810020485589rem; --distance:9.621020441949447rem; --position:40.415208115437046%; --time:3.0274067051253386s; --delay:-3.1549366655785596s;"></div>
      <div class="bubble"
           style="--size:5.2281650878480646rem; --distance:8.672399025920077rem; --position:50.4036436753225%; --time:3.0967058312094293s; --delay:-3.9870371695419213s;"></div>
      <div class="bubble"
           style="--size:2.1996233443604023rem; --distance:8.456697195152756rem; --position:-1.6756052300756652%; --time:3.245795970725918s; --delay:-3.5405248085918095s;"></div>
      <div class="bubble"
           style="--size:2.6081550060042478rem; --distance:6.101596305634882rem; --position:38.33319062278369%; --time:2.79680038210089s; --delay:-3.4699842306322273s;"></div>
      <div class="bubble"
           style="--size:4.05183332137446rem; --distance:8.147159915550311rem; --position:76.98491665824596%; --time:2.590125676416065s; --delay:-3.523030332955177s;"></div>
      <div class="bubble"
           style="--size:3.6525487317161334rem; --distance:9.43928454662531rem; --position:95.72431220154584%; --time:2.099140460385387s; --delay:-3.0797694743833612s;"></div>
      <div class="bubble"
           style="--size:5.670820914992676rem; --distance:6.288869594512979rem; --position:48.60866270717567%; --time:2.827492482337087s; --delay:-2.6841698314337497s;"></div>
      <div class="bubble"
           style="--size:3.6953293438564003rem; --distance:9.285605865224351rem; --position:83.0947422671902%; --time:2.205489878597556s; --delay:-2.552444355556253s;"></div>
      <div class="bubble"
           style="--size:5.373899242075604rem; --distance:6.251013042953493rem; --position:61.02105385585264%; --time:2.9665486682247977s; --delay:-2.394353583846707s;"></div>
      <div class="bubble"
           style="--size:4.813796039386469rem; --distance:9.964044801641583rem; --position:31.359368867613732%; --time:2.8259636765208396s; --delay:-2.3065181021686243s;"></div>
      <div class="bubble"
           style="--size:2.553919043287298rem; --distance:6.275045912383942rem; --position:9.558720371619094%; --time:3.3261357785859365s; --delay:-2.618671602976613s;"></div>
      <div class="bubble"
           style="--size:5.800707380642329rem; --distance:8.794014958425166rem; --position:94.66993705895361%; --time:3.9999249995903012s; --delay:-3.485974135606425s;"></div>
      <div class="bubble"
           style="--size:2.6707651226614715rem; --distance:9.617965436229577rem; --position:-2.262947877239958%; --time:2.287100737382702s; --delay:-3.6842374703414653s;"></div>
      <div class="bubble"
           style="--size:2.815949333965201rem; --distance:8.037467661839273rem; --position:60.09521892539723%; --time:2.623632753996995s; --delay:-3.478201960767968s;"></div>
      <div class="bubble"
           style="--size:5.240664596683909rem; --distance:8.578480644787248rem; --position:13.752267153635891%; --time:2.720534043952793s; --delay:-2.5843494509680696s;"></div>
      <div class="bubble"
           style="--size:2.967484077633653rem; --distance:9.189223161408925rem; --position:74.31596535782136%; --time:3.3001775321579907s; --delay:-3.220873239212457s;"></div>
      <div class="bubble"
           style="--size:2.1602140374692436rem; --distance:7.959506950207631rem; --position:6.41267503697418%; --time:3.5540789673533157s; --delay:-2.810028727908771s;"></div>
      <div class="bubble"
           style="--size:4.560657029291762rem; --distance:6.119417555471073rem; --position:96.20247772616618%; --time:2.862246158054208s; --delay:-2.927220571291038s;"></div>
      <div class="bubble"
           style="--size:3.985679819978494rem; --distance:9.648112715693973rem; --position:-4.865492038732617%; --time:2.934765486558252s; --delay:-2.2250736758334586s;"></div>
      <div class="bubble"
           style="--size:2.0813147693198886rem; --distance:7.41918242566028rem; --position:9.329300458511067%; --time:3.6759647550534127s; --delay:-3.0524242980556635s;"></div>
      <div class="bubble"
           style="--size:5.319035776606385rem; --distance:7.264831547028129rem; --position:70.27860865138088%; --time:3.6947880156078527s; --delay:-3.843081619784513s;"></div>
      <div class="bubble"
           style="--size:4.068328245278668rem; --distance:7.748361588110005rem; --position:11.73637011154064%; --time:2.0132587632552306s; --delay:-2.28949380136144s;"></div>
      <div class="bubble"
           style="--size:4.5049932094810226rem; --distance:7.285126610427486rem; --position:41.67103627921306%; --time:3.333779711374844s; --delay:-2.808438451371336s;"></div>
      <div class="bubble"
           style="--size:2.1444805953428583rem; --distance:9.613404529226983rem; --position:2.329248161907751%; --time:3.21491060946913s; --delay:-3.252176801483075s;"></div>
      <div class="bubble"
           style="--size:5.166377517166115rem; --distance:6.042455867551897rem; --position:85.93968262076862%; --time:2.7019587083745664s; --delay:-2.8613304833331066s;"></div>
      <div class="bubble"
           style="--size:2.174753302176442rem; --distance:7.622004990712611rem; --position:66.66995249604514%; --time:2.27587554072231s; --delay:-2.0712434170801473s;"></div>
      <div class="bubble"
           style="--size:4.3313196886238226rem; --distance:8.916877818328206rem; --position:-4.227430831165446%; --time:3.471283442519758s; --delay:-2.992447795897834s;"></div>
      <div class="bubble"
           style="--size:5.071386351792006rem; --distance:7.623291903155455rem; --position:91.29650222951456%; --time:2.301506431221124s; --delay:-2.685738460431191s;"></div>
      <div class="bubble"
           style="--size:5.151681767577306rem; --distance:7.298360253534916rem; --position:53.45595097731922%; --time:2.0868577510587114s; --delay:-2.6891631736758614s;"></div>
      <div class="bubble"
           style="--size:5.639594427829618rem; --distance:7.71262925352895rem; --position:69.3168732920326%; --time:2.183761081578394s; --delay:-2.3529731243606222s;"></div>
      <div class="bubble"
           style="--size:3.711463136858681rem; --distance:6.928290597742296rem; --position:87.3158508654627%; --time:2.015063982794981s; --delay:-3.1371329489356836s;"></div>
      <div class="bubble"
           style="--size:4.749616264554368rem; --distance:8.570418169645587rem; --position:89.63275581570768%; --time:2.2105709037787475s; --delay:-3.5621919643383255s;"></div>
      <div class="bubble"
           style="--size:5.963765682013564rem; --distance:9.42804712289025rem; --position:95.83618495812175%; --time:3.6328520484096494s; --delay:-2.3736756038618063s;"></div>
      <div class="bubble"
           style="--size:3.9287488565692428rem; --distance:9.839967551453132rem; --position:-1.487303037233163%; --time:2.2715904407006775s; --delay:-2.545620306603312s;"></div>
      <div class="bubble"
           style="--size:3.2095957593968665rem; --distance:6.068785691358211rem; --position:58.02435450200123%; --time:3.8052700626190306s; --delay:-2.266032777445433s;"></div>
      <div class="bubble"
           style="--size:4.1701432764350645rem; --distance:8.39761314096421rem; --position:6.745084973220443%; --time:2.792109466406752s; --delay:-2.161715606712989s;"></div>
      <div class="bubble"
           style="--size:4.216915600358505rem; --distance:8.973954750282356rem; --position:98.35612701077986%; --time:2.829703842229475s; --delay:-3.1255002121111857s;"></div>
      <div class="bubble"
           style="--size:2.0469961038497386rem; --distance:7.898124904835572rem; --position:103.2270209287951%; --time:2.325376193042702s; --delay:-2.0369484040440566s;"></div>
      <div class="bubble"
           style="--size:4.614698667606586rem; --distance:7.721136476457359rem; --position:7.615144391887618%; --time:3.3544528168942263s; --delay:-3.1847756278131163s;"></div>
      <div class="bubble"
           style="--size:4.82865455735554rem; --distance:7.390971890968355rem; --position:23.656315217480916%; --time:3.0517419848263407s; --delay:-3.113423178595763s;"></div>
      <div class="bubble"
           style="--size:3.1117121265093344rem; --distance:8.438703219764601rem; --position:84.69123422600615%; --time:3.326737140761865s; --delay:-3.736986792861956s;"></div>
      <div class="bubble"
           style="--size:2.1151268199980553rem; --distance:6.796942669977368rem; --position:40.60784227821928%; --time:2.401470998556806s; --delay:-3.980260048287868s;"></div>
      <div class="bubble"
           style="--size:4.1101428439632235rem; --distance:8.5053214321574rem; --position:34.63315761383096%; --time:3.4842329635894185s; --delay:-3.5438073020082603s;"></div>
      <div class="bubble"
           style="--size:3.7330532493817508rem; --distance:6.319423554465877rem; --position:90.666728088291%; --time:2.15544291696632s; --delay:-2.4493636980375255s;"></div>
      <div class="bubble"
           style="--size:3.781691239027106rem; --distance:6.269596268908122rem; --position:-0.8403604106261886%; --time:3.5750491185611635s; --delay:-3.319798805613623s;"></div>
      <div class="bubble"
           style="--size:3.2388850119735855rem; --distance:8.813711799138442rem; --position:64.02785653244192%; --time:3.86967825508247s; --delay:-3.5291496629910966s;"></div>
      <div class="bubble"
           style="--size:5.79775708894036rem; --distance:6.173595539595871rem; --position:66.7908228424753%; --time:2.9975323263822595s; --delay:-2.589299816473733s;"></div>
      <div class="bubble"
           style="--size:3.358416263373277rem; --distance:6.505827065099346rem; --position:72.91706135388354%; --time:2.4653946595232985s; --delay:-2.611046017093403s;"></div>
      <div class="bubble"
           style="--size:5.377204264520834rem; --distance:8.958335003406651rem; --position:34.515924080414536%; --time:2.106745700388824s; --delay:-2.4547256048947523s;"></div>
      <div class="bubble"
           style="--size:5.462521988929754rem; --distance:9.10721832782561rem; --position:88.47939892948605%; --time:3.2599818092672184s; --delay:-3.481287901583261s;"></div>
      <div class="bubble"
           style="--size:4.4836934712059975rem; --distance:8.25888221652868rem; --position:98.11606847622355%; --time:2.540777260740079s; --delay:-3.914257377170237s;"></div>
      <div class="bubble"
           style="--size:4.895916479470343rem; --distance:6.372869662110534rem; --position:7.278308454275013%; --time:2.073019506491966s; --delay:-2.2227988329801116s;"></div>
      <div class="bubble"
           style="--size:4.645462864219141rem; --distance:9.494783122799715rem; --position:-0.3465100092426576%; --time:2.822282251196411s; --delay:-2.046724414859861s;"></div>
      <div class="bubble"
           style="--size:2.7489758791968315rem; --distance:8.201309515094067rem; --position:95.50503518462453%; --time:3.224574798469754s; --delay:-3.5488838433235306s;"></div>
      <div class="bubble"
           style="--size:5.58659112352753rem; --distance:6.016899173843498rem; --position:26.20085762868724%; --time:2.9891694105071114s; --delay:-2.874823415636692s;"></div>
      <div class="bubble"
           style="--size:3.644124732108665rem; --distance:9.69944139198034rem; --position:25.780206144894187%; --time:3.4844572743278923s; --delay:-3.2175816022543353s;"></div>
      <div class="bubble"
           style="--size:5.329319925575128rem; --distance:9.099233881714877rem; --position:91.29573757062371%; --time:2.024774347814793s; --delay:-2.1398987647578993s;"></div>
      <div class="bubble"
           style="--size:2.737688179984522rem; --distance:6.510596332052749rem; --position:42.83339757780594%; --time:2.7987935931928587s; --delay:-2.5958476710662053s;"></div>
      <div class="bubble"
           style="--size:2.3842388147980262rem; --distance:7.641237374116854rem; --position:44.84996586025589%; --time:2.2405056988403502s; --delay:-2.7315729180674424s;"></div>
      <div class="bubble"
           style="--size:4.982529158799769rem; --distance:7.988754563050836rem; --position:65.38303521731241%; --time:2.480580539475004s; --delay:-3.22768593153103s;"></div>
      <div class="bubble"
           style="--size:3.094005537474188rem; --distance:7.55074201547385rem; --position:14.358256283809375%; --time:2.985432431162139s; --delay:-3.6297022138818273s;"></div>
      <div class="bubble"
           style="--size:3.6905607032440892rem; --distance:8.254016483039793rem; --position:31.799108145137197%; --time:2.739208843078655s; --delay:-2.88512312848586s;"></div>
      <div class="bubble"
           style="--size:2.724403384209955rem; --distance:8.215392982352762rem; --position:101.48508503569727%; --time:3.9850074090558563s; --delay:-3.689643372735008s;"></div>
      <div class="bubble"
           style="--size:3.5027202520098744rem; --distance:9.695047535128623rem; --position:63.44150402743661%; --time:2.6547005483830537s; --delay:-2.99426548532755s;"></div>
      <div class="bubble"
           style="--size:3.280519242378361rem; --distance:7.525814203712522rem; --position:28.52516463840908%; --time:2.9357417453035604s; --delay:-3.2018617690384295s;"></div>
      <div class="bubble"
           style="--size:4.4867884837368655rem; --distance:8.259785455311482rem; --position:104.22808812337277%; --time:2.6134898961269353s; --delay:-2.103770432974849s;"></div>
      <div class="bubble"
           style="--size:5.830701691830475rem; --distance:7.441652126887371rem; --position:34.48599627237308%; --time:2.636834940068237s; --delay:-2.6108644645066317s;"></div>
      <div class="bubble"
           style="--size:3.1999899512133334rem; --distance:6.821306330007393rem; --position:58.97380372600389%; --time:3.1412826053855523s; --delay:-3.185193197116117s;"></div>
      <div class="bubble"
           style="--size:2.538266256124756rem; --distance:9.871254090251767rem; --position:49.10299925065134%; --time:2.509665678341794s; --delay:-2.824894984496866s;"></div>
      <div class="bubble"
           style="--size:5.08363720391056rem; --distance:7.375191190855298rem; --position:95.43313863614857%; --time:2.825041733819295s; --delay:-2.728574720587473s;"></div>
      <div class="bubble"
           style="--size:4.533170027225178rem; --distance:9.631461186736296rem; --position:97.72380245571256%; --time:3.3105560845921733s; --delay:-3.0975748940173524s;"></div>
      <div class="bubble"
           style="--size:3.7353373853459777rem; --distance:8.32527087561801rem; --position:57.347257838525266%; --time:2.9385894517611177s; --delay:-3.1242006783116434s;"></div>
      <div class="bubble"
           style="--size:2.043077448439365rem; --distance:8.810062048929517rem; --position:90.47221991589318%; --time:3.1095242238817438s; --delay:-3.7443095589473816s;"></div>
      <div class="bubble"
           style="--size:5.536375379326135rem; --distance:6.644181765937244rem; --position:15.604004648724825%; --time:3.3869394579015175s; --delay:-3.291416938624703s;"></div>
      <div class="bubble"
           style="--size:3.4486566940094505rem; --distance:9.421003406941288rem; --position:35.37176661534281%; --time:2.0236400403213595s; --delay:-3.6406177422524713s;"></div>
      <div class="bubble"
           style="--size:3.1641352632448276rem; --distance:7.752078494731515rem; --position:31.88095663709531%; --time:2.1584359106242386s; --delay:-2.114549351996013s;"></div>
      <div class="bubble"
           style="--size:3.630178665240029rem; --distance:7.498883830505759rem; --position:2.98318338089556%; --time:2.907694154735494s; --delay:-2.0433691471926596s;"></div>
      <div class="bubble"
           style="--size:4.418271026388757rem; --distance:8.832999307709507rem; --position:10.587711938866075%; --time:2.8540265526163635s; --delay:-2.7863197752170823s;"></div>
      <div class="bubble"
           style="--size:4.297675421428847rem; --distance:6.9654005959335175rem; --position:51.463363124186486%; --time:2.3427154025430577s; --delay:-2.6901268818747717s;"></div>
      <div class="bubble"
           style="--size:3.2044488165812304rem; --distance:8.409321098486322rem; --position:86.92552223147153%; --time:3.255676969332812s; --delay:-2.685886176880318s;"></div>
      <div class="bubble"
           style="--size:5.48645694614596rem; --distance:6.091507697841885rem; --position:50.0800334253422%; --time:3.013751749146443s; --delay:-2.6131158616322656s;"></div>
      <div class="bubble"
           style="--size:5.8069297002862506rem; --distance:6.293844549103125rem; --position:39.029154545905165%; --time:2.9838833895856s; --delay:-3.1028195830917564s;"></div>
      <div class="bubble"
           style="--size:3.3281582105420906rem; --distance:7.452920207444191rem; --position:77.55833706156604%; --time:2.852160917412009s; --delay:-2.198718238966046s;"></div>
      <div class="bubble"
           style="--size:4.150238986838169rem; --distance:8.57231102199093rem; --position:18.476939423897228%; --time:3.4556198495632344s; --delay:-3.1431136416618988s;"></div>
      <div class="bubble"
           style="--size:3.5476852861256374rem; --distance:7.1125744402586815rem; --position:28.190899506823712%; --time:3.7919525944901897s; --delay:-3.0506012869098718s;"></div>
    </div>
    <div class="content">
      <div>
        <div><b>技术支持</b><a href="#">广州威迪浩渤科技股份有限公司</a></div>
        <div><b>公司地址</b><a href="#">广东省广州市天河区中山大道西263号</a></div>
        <div><b>投诉热线</b><a href="#">020-6429342 (08:00-22:00)</a></div>
        <!--        <div><b>Athod</b><a href="#">Pamuz</a><a href="#">Vapert</a><a href="#">Neesk</a><a href="#">Omemanen</a></div>-->
      </div>
      <div><a class="image" href="#" target="_blank"
              style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/happy.svg)"></a>
        <p><strong>©2023 VIDEO HUB</strong></p>
      </div>
    </div>
  </div>
  <svg style="position:fixed; top:100vh">
    <defs>
      <filter id="blob">
        <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"
                       result="blob"></feColorMatrix>
        <!--feComposite(in="SourceGraphic" in2="blob" operator="atop") //After reviewing this after years I can't remember why I added this but it isn't necessary for the blob effect-->
      </filter>
    </defs>
  </svg>
  <!-- partial -->
</template>

<style scoped>

body {
  display: grid;
  grid-template-rows: 1fr 10rem auto;
  grid-template-areas: "main" "." "footer";
  overflow-x: hidden;
  background: #F5F7FA;
  min-height: 100vh;
  font-family: "Open Sans", sans-serif;
}

body .footer {
  z-index: 1;
  --footer-background: #3baeea;
  display: grid;
  position: relative;
  grid-area: footer;
  min-height: 12rem;
}

body .footer .bubbles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1rem;
  background: var(--footer-background);
  filter: url("#blob");
}

body .footer .bubbles .bubble {
  position: absolute;
  left: var(--position, 50%);
  background: var(--footer-background);
  border-radius: 100%;
  -webkit-animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 6s) ease-in infinite var(--delay, 0s);
  animation: bubble-size var(--time, 6s) ease-in infinite var(--delay, 1s), bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
  transform: translate(-50%, 100%);
}

body .footer .content {
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 4rem;
  padding: 2rem;
  background: var(--footer-background);
}

body .footer .content a, body .footer .content p {
  color: #F5F7FA;
  text-decoration: none;
}

body .footer .content b {
  color: white;
}

body .footer .content p {
  margin: 0;
  font-size: 0.85rem;
}

body .footer .content > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body .footer .content > div > div {
  margin: 0.25rem 0;
}

body .footer .content > div > div > * {
  margin-right: 0.5rem;
}

body .footer .content > div .image {
  align-self: center;
  width: 4rem;
  height: 4rem;
  margin: 0.25rem 0;
  background-size: cover;
  background-position: center;
}

p strong {
  font-size: 16px;
}

@-webkit-keyframes bubble-size {
  0%, 75% {
    width: var(--size, 4rem);
    height: var(--size, 4rem);
  }
  100% {
    width: 0rem;
    height: 0rem;
  }
}

@keyframes bubble-size {
  0%, 75% {
    width: var(--size, 4rem);
    height: var(--size, 4rem);
  }
  100% {
    width: 0rem;
    height: 0rem;
  }
}

@-webkit-keyframes bubble-move {
  0% {
    bottom: -4rem;
  }
  100% {
    bottom: var(--distance, 10rem);
  }
}

@keyframes bubble-move {
  0% {
    bottom: -4rem;
  }
  100% {
    bottom: var(--distance, 10rem);
  }
}
</style>